<template>
<div>
    <div class="mgb10">
      <el-button v-if="uploadable" type="primary" :loading="uploading">
        <el-upload :action="apiBaseUrl + '/admin/order/voucher'" 
          :before-upload="onBeforeUpload"
          :on-success="onVoucherUploadSuccess"
          :headers="authTokenHeader"
          :data="{'orderNumber': order.orderNumber}" 
          style="display:inline"
          :multiple="false" :show-file-list="false">
          <i class="el-icon-upload"></i> 共享凭证
        </el-upload>
      </el-button>
    </div>
    <el-table :data="travellers" border fit>
      <el-table-column prop="name" label="游客姓名"/>
      <el-table-column label="凭证">
        <template slot-scope="scope">
          <a :href="scope.row.voucherFileUrl" target="_parent">{{scope.row.voucherFileName}}</a>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center" width="90">
        <template slot-scope="scope">{{OrderTravellerStatus[scope.row.status + '']}}</template>
      </el-table-column>
      <el-table-column prop="refundStatus" label="退款状态" align="center" width="100">
        <template slot-scope="scope">
          <el-tag :type="['success', 'danger', '', 'danger', '', 'danger'][scope.row.refundStatus]">
            {{OrderTravellerRefundStatus[scope.row.refundStatus + '']}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="left" width="180">
        <template slot-scope="scope">
          <el-button v-if="order.status > 2 && scope.row.refundStatus == 0" size="small" :loading="uploading">
            <el-upload :action="apiBaseUrl + '/admin/order/voucher'" 
              style="display:inline"
              :before-upload="onBeforeUpload"
              :on-success="onVoucherUploadSuccess"
              :headers="authTokenHeader"
              :data="{'orderNumber': order.orderNumber, 'travellerId': scope.row.id}" 
              :multiple="false" :show-file-list="false">
                <i class="el-icon-upload"></i> 上传凭证
            </el-upload>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
</div>
</template>

<script>
import Env from '@/env'
import { Orders, Header } from '@/store/api'
import { OrderTravellerStatus, OrderTravellerRefundStatus } from '@/constants'

export default {
  name: 'order-voucher',
  props: {
    order: {
      type: Object,
      required: true
    }
  },
  computed: {
    uploadable() {
      return this.order.status > 2 && this.travellers.some(t => {
        return t.refundStatus === 0
      })
    }
  },
  data() {
    return {
      apiBaseUrl: Env.apiBaseUrl,
      authTokenHeader: Header.authToken(),
      OrderTravellerStatus: OrderTravellerStatus,
      OrderTravellerRefundStatus: OrderTravellerRefundStatus,
      travellers: [],
      uploading: false
    }
  },
  created () {
    this.loadTravellers()
  },
  methods: {
    loadTravellers() {
      Orders.listTravellers(this.order.orderNumber).then(data => {
        this.travellers = data
      })
    },
    onBeforeUpload() {
      this.uploading = true
    },
    onVoucherUploadSuccess(response, file) {
      this.uploading = false
      if (response && response.code && response.code === 200) {
        this.$notify.success({
          title: '上传完成',
          message: '凭证上传成功',
          offset: 100,
          duration: 2000
        })
        this.loadTravellers()
      } else {
        this.$notify.error({
          title: '上传失败',
          message: response.message,
          offset: 100,
          duration: 2000
        })
      }
    }
  }
}
</script>
